<template>
  <div class="files-container">
    <!-- 页面头部区域 -->
    <div class="files-header">
      <div class="header-content">
        <div class="ancient-title">档案文件管理</div>
        <div class="header-subtitle">阴曹地府 · 生死档案数字化管理中心</div>
      </div>
      <div class="header-decoration">
        <div class="decoration-line"></div>
        <div class="decoration-symbol">📚</div>
        <div class="decoration-line"></div>
      </div>
    </div>

    <!-- 路由信息显示 -->
    <div class="route-info">
      <a-breadcrumb>
        <a-breadcrumb-item>
          <FolderOutlined />
          {{ $route.meta.title }}
        </a-breadcrumb-item>
      </a-breadcrumb>
    </div>

    <!-- 核心统计卡片 -->
    <div class="stats-section">
      <a-row :gutter="[20, 20]" class="stats-grid">
        <a-col :xs="24" :sm="12" :xl="6">
          <div class="stat-card primary-stat">
            <div class="stat-icon">
              <FileTextOutlined />
            </div>
            <div class="stat-content">
              <div class="stat-title">档案总数</div>
              <div class="stat-value">{{ archiveStats.totalArchives }}</div>
              <div class="stat-label">万份档案</div>
            </div>
          </div>
        </a-col>

        <a-col :xs="24" :sm="12" :xl="6">
          <div class="stat-card judgment-stat">
            <div class="stat-icon">
              <ScanOutlined />
            </div>
            <div class="stat-content">
              <div class="stat-title">数字化率</div>
              <div class="stat-value">{{ archiveStats.digitalizationRate }}%</div>
              <div class="stat-label">已数字化</div>
            </div>
          </div>
        </a-col>

        <a-col :xs="24" :sm="12" :xl="6">
          <div class="stat-card pending-stat">
            <div class="stat-icon">
              <BookOutlined />
            </div>
            <div class="stat-content">
              <div class="stat-title">在借档案</div>
              <div class="stat-value">{{ archiveStats.borrowedArchives }}</div>
              <div class="stat-label">份档案</div>
            </div>
          </div>
        </a-col>

        <a-col :xs="24" :sm="12" :xl="6">
          <div class="stat-card online-stat">
            <div class="stat-icon">
              <CloudServerOutlined />
            </div>
            <div class="stat-content">
              <div class="stat-title">存储容量</div>
              <div class="stat-value">{{ archiveStats.storageUsage }}TB</div>
              <div class="stat-label">已使用</div>
            </div>
          </div>
        </a-col>
      </a-row>
    </div>

    <!-- 功能模块导航 -->
    <div class="modules-section">
      <h3 class="section-title">
        <FolderOpenOutlined class="section-icon" />
        档案管理功能
      </h3>

      <a-row :gutter="[24, 24]" class="modules-grid">
        <!-- 纸质档案数字化 -->
        <a-col :xs="24" :lg="8">
          <div class="module-card" @click="navigateToModule('/files/digital-archive')">
            <div class="module-header">
              <div class="module-icon">
                <ScanOutlined />
              </div>
              <div class="module-title">纸质档案数字化</div>
            </div>
            <div class="module-description">将传统纸质档案转换为数字格式，包含扫描、OCR识别、分类整理等功能</div>
            <div class="module-stats">
              <div class="stat-item">
                <span class="stat-label">已扫描：</span>
                <span class="stat-value">{{ moduleStats.digitalArchive.scannedFiles }}万份</span>
              </div>
              <div class="stat-item">
                <span class="stat-label">识别率：</span>
                <span class="stat-value">{{ moduleStats.digitalArchive.recognitionRate }}%</span>
              </div>
            </div>
          </div>
        </a-col>

        <!-- 电子档案管理 -->
        <a-col :xs="24" :lg="8">
          <div class="module-card" @click="navigateToModule('/files/electronic-archive')">
            <div class="module-header">
              <div class="module-icon">
                <LaptopOutlined />
              </div>
              <div class="module-title">电子档案管理</div>
            </div>
            <div class="module-description">管理电子档案的版本控制、权限设置、备份恢复和安全加密等功能</div>
            <div class="module-stats">
              <div class="stat-item">
                <span class="stat-label">电子文件：</span>
                <span class="stat-value">{{ moduleStats.electronicArchive.electronicFiles }}万份</span>
              </div>
              <div class="stat-item">
                <span class="stat-label">安全等级：</span>
                <span class="stat-value">{{ moduleStats.electronicArchive.securityLevel }}</span>
              </div>
            </div>
          </div>
        </a-col>

        <!-- 档案借阅系统 -->
        <a-col :xs="24" :lg="8">
          <div class="module-card" @click="navigateToModule('/files/borrow-system')">
            <div class="module-header">
              <div class="module-icon">
                <AuditOutlined />
              </div>
              <div class="module-title">档案借阅系统</div>
            </div>
            <div class="module-description">管理档案的借阅申请、期限控制、归还提醒和损坏赔偿等流程</div>
            <div class="module-stats">
              <div class="stat-item">
                <span class="stat-label">本月借阅：</span>
                <span class="stat-value">{{ moduleStats.borrowSystem.monthlyBorrows }}次</span>
              </div>
              <div class="stat-item">
                <span class="stat-label">按时归还率：</span>
                <span class="stat-value">{{ moduleStats.borrowSystem.returnRate }}%</span>
              </div>
            </div>
          </div>
        </a-col>
      </a-row>
    </div>

    <!-- 档案分类概览 -->
    <div class="categories-overview-section">
      <h3 class="section-title">
        <AppstoreOutlined class="section-icon" />
        档案分类概览
      </h3>

      <div class="categories-grid">
        <a-row :gutter="[16, 16]">
          <a-col :xs="24" :sm="12" :lg="8" :xl="6" v-for="category in archiveCategories" :key="category.id">
            <div class="category-card">
              <div class="category-header">
                <div class="category-icon">
                  <component :is="category.icon" />
                </div>
                <div class="category-info">
                  <h4 class="category-name">{{ category.name }}</h4>
                  <p class="category-description">{{ category.description }}</p>
                </div>
              </div>

              <div class="category-stats">
                <a-row :gutter="8">
                  <a-col :span="8">
                    <div class="stat-mini">
                      <div class="stat-number">{{ category.totalFiles }}</div>
                      <div class="stat-label">总文件</div>
                    </div>
                  </a-col>
                  <a-col :span="8">
                    <div class="stat-mini">
                      <div class="stat-number">{{ category.digitalFiles }}</div>
                      <div class="stat-label">已数字化</div>
                    </div>
                  </a-col>
                  <a-col :span="8">
                    <div class="stat-mini">
                      <div class="stat-number">{{ category.borrowedFiles }}</div>
                      <div class="stat-label">借阅中</div>
                    </div>
                  </a-col>
                </a-row>
              </div>

              <div class="category-progress">
                <div class="progress-info">
                  <span class="progress-label">数字化进度</span>
                  <span class="progress-percentage">{{ Math.round((category.digitalFiles / category.totalFiles) * 100) }}%</span>
                </div>
                <a-progress :percent="Math.round((category.digitalFiles / category.totalFiles) * 100)" size="small" :show-info="false" />
              </div>
            </div>
          </a-col>
        </a-row>
      </div>
    </div>

    <!-- 最新档案动态 -->
    <div class="archive-dynamics-section">
      <h3 class="section-title">
        <NotificationOutlined class="section-icon" />
        最新档案动态
      </h3>

      <div class="dynamics-list">
        <a-list
          :data-source="archiveDynamics"
          :pagination="{
            pageSize: 5,
            showSizeChanger: false
          }"
        >
          <template #renderItem="{ item }">
            <a-list-item>
              <a-list-item-meta>
                <template #avatar>
                  <a-avatar :style="{ backgroundColor: item.avatarColor }" size="large">
                    <component :is="item.icon" />
                  </a-avatar>
                </template>
                <template #title>
                  <span class="dynamics-title">{{ item.title }}</span>
                  <a-tag :color="item.tagColor" size="small" style="margin-left: 8px">{{ item.type }}</a-tag>
                </template>
                <template #description>
                  <div class="dynamics-description">{{ item.description }}</div>
                  <div class="dynamics-meta">
                    <span class="dynamics-time">{{ item.time }}</span>
                    <span class="dynamics-operator">操作人：{{ item.operator }}</span>
                  </div>
                </template>
              </a-list-item-meta>
            </a-list-item>
          </template>
        </a-list>
      </div>
    </div>

    <!-- 快速操作面板 -->
    <div class="quick-actions-section">
      <a-card title="快速操作" :bordered="false">
        <a-row :gutter="16">
          <a-col :span="6">
            <a-button type="primary" block @click="quickScan">
              <ScanOutlined />
              快速扫描
            </a-button>
          </a-col>
          <a-col :span="6">
            <a-button block @click="quickSearch">
              <SearchOutlined />
              档案检索
            </a-button>
          </a-col>
          <a-col :span="6">
            <a-button block @click="quickBorrow">
              <BookOutlined />
              快速借阅
            </a-button>
          </a-col>
          <a-col :span="6">
            <a-button block @click="systemMaintenance">
              <SettingOutlined />
              系统维护
            </a-button>
          </a-col>
        </a-row>
      </a-card>
    </div>

    <!-- 档案操作统计 -->
    <div class="operation-stats-section">
      <h3 class="section-title">
        <BarChartOutlined class="section-icon" />
        档案操作统计
      </h3>

      <a-row :gutter="[16, 16]">
        <a-col :xs="24" :sm="6">
          <div class="operation-stat-card">
            <div class="stat-header">
              <div class="stat-title">今日操作</div>
              <div class="stat-value">{{ operationStats.todayOperations.toLocaleString() }}</div>
            </div>
          </div>
        </a-col>
        <a-col :xs="24" :sm="6">
          <div class="operation-stat-card">
            <div class="stat-header">
              <div class="stat-title">本周操作</div>
              <div class="stat-value">{{ operationStats.weeklyOperations.toLocaleString() }}</div>
            </div>
          </div>
        </a-col>
        <a-col :xs="24" :sm="6">
          <div class="operation-stat-card">
            <div class="stat-header">
              <div class="stat-title">本月操作</div>
              <div class="stat-value">{{ operationStats.monthlyOperations.toLocaleString() }}</div>
            </div>
          </div>
        </a-col>
        <a-col :xs="24" :sm="6">
          <div class="operation-stat-card">
            <div class="stat-header">
              <div class="stat-title">总操作数</div>
              <div class="stat-value">{{ (operationStats.totalOperations / 10000).toFixed(1) }}万</div>
            </div>
          </div>
        </a-col>
      </a-row>

      <div class="popular-operations">
        <a-card title="热门操作分析" :bordered="false">
          <div class="operations-chart">
            <div class="operation-item" v-for="operation in operationStats.popularOperations" :key="operation.name">
              <div class="operation-info">
                <span class="operation-name">{{ operation.name }}</span>
                <span class="operation-count">{{ operation.count.toLocaleString() }}次</span>
              </div>
              <div class="operation-progress">
                <a-progress :percent="operation.percentage" :show-info="false" size="small" />
                <span class="percentage">{{ operation.percentage }}%</span>
              </div>
            </div>
          </div>
        </a-card>
      </div>
    </div>

    <!-- 档案质量统计 -->
    <div class="quality-stats-section">
      <h3 class="section-title">
        <CheckCircleOutlined class="section-icon" />
        档案质量统计
      </h3>

      <a-row :gutter="[16, 16]">
        <a-col :xs="24" :lg="12">
          <a-card title="质量检查概览" :bordered="false">
            <div class="quality-overview">
              <div class="quality-metric">
                <div class="metric-label">总检查数</div>
                <div class="metric-value">{{ qualityStats.totalQualityChecks.toLocaleString() }}</div>
              </div>
              <div class="quality-metric">
                <div class="metric-label">通过检查</div>
                <div class="metric-value metric-success">{{ qualityStats.passedChecks.toLocaleString() }}</div>
              </div>
              <div class="quality-metric">
                <div class="metric-label">未通过检查</div>
                <div class="metric-value metric-error">{{ qualityStats.failedChecks.toLocaleString() }}</div>
              </div>
              <div class="quality-metric">
                <div class="metric-label">质量评分</div>
                <div class="metric-value metric-primary">{{ qualityStats.qualityScore }}分</div>
              </div>
            </div>
          </a-card>
        </a-col>

        <a-col :xs="24" :lg="12">
          <a-card title="常见问题分析" :bordered="false">
            <div class="issues-chart">
              <div class="issue-item" v-for="issue in qualityStats.commonIssues" :key="issue.issue">
                <div class="issue-info">
                  <span class="issue-name">{{ issue.issue }}</span>
                  <span class="issue-count">{{ issue.count }}次</span>
                </div>
                <div class="issue-progress">
                  <a-progress :percent="issue.percentage" :show-info="false" size="small" status="exception" />
                  <span class="percentage">{{ issue.percentage }}%</span>
                </div>
              </div>
            </div>
          </a-card>
        </a-col>
      </a-row>
    </div>

    <!-- 系统性能监控 -->
    <div class="system-performance-section">
      <h3 class="section-title">
        <DashboardOutlined class="section-icon" />
        系统性能监控
      </h3>

      <a-row :gutter="[16, 16]">
        <a-col :xs="24" :md="8">
          <a-card title="资源使用情况" :bordered="false">
            <div class="resource-usage">
              <div class="resource-item">
                <div class="resource-label">CPU 使用率</div>
                <div class="resource-progress">
                  <a-progress :percent="systemPerformance.cpuUsage" :stroke-color="getResourceColor(systemPerformance.cpuUsage)" />
                </div>
              </div>
              <div class="resource-item">
                <div class="resource-label">内存使用率</div>
                <div class="resource-progress">
                  <a-progress :percent="systemPerformance.memoryUsage" :stroke-color="getResourceColor(systemPerformance.memoryUsage)" />
                </div>
              </div>
              <div class="resource-item">
                <div class="resource-label">磁盘使用率</div>
                <div class="resource-progress">
                  <a-progress :percent="systemPerformance.diskUsage" :stroke-color="getResourceColor(systemPerformance.diskUsage)" />
                </div>
              </div>
            </div>
          </a-card>
        </a-col>

        <a-col :xs="24" :md="8">
          <a-card title="网络性能" :bordered="false">
            <div class="network-metrics">
              <div class="metric-item">
                <div class="metric-label">网络速度</div>
                <div class="metric-value">{{ systemPerformance.networkSpeed }} MB/s</div>
              </div>
              <div class="metric-item">
                <div class="metric-label">响应时间</div>
                <div class="metric-value">{{ systemPerformance.responseTime }} ms</div>
              </div>
              <div class="metric-item">
                <div class="metric-label">系统正常运行时间</div>
                <div class="metric-value">{{ systemPerformance.uptime }}%</div>
              </div>
            </div>
          </a-card>
        </a-col>

        <a-col :xs="24" :md="8">
          <a-card title="用户活动" :bordered="false">
            <div class="user-activity">
              <div class="activity-item">
                <div class="activity-label">今日用户</div>
                <div class="activity-value">{{ systemPerformance.dailyUsers }}</div>
              </div>
              <div class="activity-item">
                <div class="activity-label">当前在线</div>
                <div class="activity-value">{{ systemPerformance.concurrentUsers }}</div>
              </div>
              <div class="activity-item">
                <div class="activity-label">峰值用户</div>
                <div class="activity-value">{{ systemPerformance.peakUsers }}</div>
              </div>
            </div>
          </a-card>
        </a-col>
      </a-row>
    </div>

    <!-- 档案存储分析 -->
    <div class="storage-analysis-section">
      <h3 class="section-title">
        <DatabaseOutlined class="section-icon" />
        档案存储分析
      </h3>

      <a-row :gutter="[16, 16]">
        <a-col :xs="24" :lg="12">
          <a-card title="存储类型分布" :bordered="false">
            <div class="storage-distribution">
              <div class="storage-type">
                <div class="type-info">
                  <span class="type-name">纸质档案</span>
                  <span class="type-size">45.6TB</span>
                </div>
                <a-progress :percent="29.1" :show-info="false" :stroke-color="'#1890ff'" />
              </div>
              <div class="storage-type">
                <div class="type-info">
                  <span class="type-name">数字化档案</span>
                  <span class="type-size">67.8TB</span>
                </div>
                <a-progress :percent="43.2" :show-info="false" :stroke-color="'#52c41a'" />
              </div>
              <div class="storage-type">
                <div class="type-info">
                  <span class="type-name">电子档案</span>
                  <span class="type-size">32.4TB</span>
                </div>
                <a-progress :percent="20.7" :show-info="false" :stroke-color="'#faad14'" />
              </div>
              <div class="storage-type">
                <div class="type-info">
                  <span class="type-name">备份档案</span>
                  <span class="type-size">11.0TB</span>
                </div>
                <a-progress :percent="7.0" :show-info="false" :stroke-color="'#722ed1'" />
              </div>
            </div>
          </a-card>
        </a-col>

        <a-col :xs="24" :lg="12">
          <a-card title="存储增长趋势" :bordered="false">
            <div class="growth-trend">
              <div class="trend-item">
                <div class="trend-period">今日新增</div>
                <div class="trend-value">{{ (2.34).toFixed(2) }}TB</div>
                <div class="trend-change positive">+12.5%</div>
              </div>
              <div class="trend-item">
                <div class="trend-period">本周新增</div>
                <div class="trend-value">{{ (15.67).toFixed(2) }}TB</div>
                <div class="trend-change positive">+8.9%</div>
              </div>
              <div class="trend-item">
                <div class="trend-period">本月新增</div>
                <div class="trend-value">{{ (62.34).toFixed(2) }}TB</div>
                <div class="trend-change positive">+15.2%</div>
              </div>
              <div class="trend-item">
                <div class="trend-period">预计月底</div>
                <div class="trend-value">{{ (189.45).toFixed(2) }}TB</div>
                <div class="trend-change neutral">预测值</div>
              </div>
            </div>
          </a-card>
        </a-col>
      </a-row>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import {
  HomeOutlined,
  FolderOutlined,
  FolderOpenOutlined,
  FileTextOutlined,
  ScanOutlined,
  BookOutlined,
  CloudServerOutlined,
  LaptopOutlined,
  AuditOutlined,
  AppstoreOutlined,
  NotificationOutlined,
  SearchOutlined,
  SettingOutlined,
  UserOutlined,
  TrophyOutlined,
  TeamOutlined,
  HistoryOutlined,
  SafetyOutlined,
  DatabaseOutlined,
  StarOutlined,
  HeartOutlined,
  FireOutlined,
  RiseOutlined,
  RobotOutlined,
  ClockCircleOutlined,
  TagsOutlined,
  GlobalOutlined,
  ToolOutlined,
  LockOutlined,
  BarChartOutlined,
  CheckCircleOutlined,
  DashboardOutlined
} from '@ant-design/icons-vue'

const router = useRouter()

// 档案统计信息 - 增加更多统计数据
const archiveStats = reactive({
  totalArchives: 1288.6,
  digitalizationRate: 87,
  borrowedArchives: 2456,
  storageUsage: 156.8
})

// 模块统计信息 - 增加更多模块数据
const moduleStats = reactive({
  digitalArchive: {
    scannedFiles: 112.5,
    recognitionRate: 96
  },
  electronicArchive: {
    electronicFiles: 95.8,
    securityLevel: 'AAA+'
  },
  borrowSystem: {
    monthlyBorrows: 1847,
    returnRate: 98
  }
})

// 档案分类数据 - 扩展为更多分类
const archiveCategories = ref([
  {
    id: 1,
    name: '生死记录',
    description: '记录众生生死轮回的重要档案',
    icon: 'UserOutlined',
    totalFiles: 156780,
    digitalFiles: 145230,
    borrowedFiles: 234
  },
  {
    id: 2,
    name: '业力档案',
    description: '记录善恶业力评定和修行进度',
    icon: 'TrophyOutlined',
    totalFiles: 298456,
    digitalFiles: 267890,
    borrowedFiles: 567
  },
  {
    id: 3,
    name: '审判记录',
    description: '各殿阎王审判案例和处罚决定',
    icon: 'SafetyOutlined',
    totalFiles: 89234,
    digitalFiles: 82145,
    borrowedFiles: 123
  },
  {
    id: 4,
    name: '转世档案',
    description: '轮回转世安排和六道分配记录',
    icon: 'HistoryOutlined',
    totalFiles: 445678,
    digitalFiles: 401234,
    borrowedFiles: 789
  },
  {
    id: 5,
    name: '仙官档案',
    description: '地府仙官人事档案和工作记录',
    icon: 'TeamOutlined',
    totalFiles: 12890,
    digitalFiles: 12456,
    borrowedFiles: 45
  },
  {
    id: 6,
    name: '古籍典藏',
    description: '珍贵的古籍善本和修行典籍',
    icon: 'DatabaseOutlined',
    totalFiles: 45678,
    digitalFiles: 35234,
    borrowedFiles: 156
  },
  {
    id: 7,
    name: '案例汇编',
    description: '典型案例汇编和审判参考资料',
    icon: 'FileTextOutlined',
    totalFiles: 67890,
    digitalFiles: 59876,
    borrowedFiles: 234
  },
  {
    id: 8,
    name: '制度文件',
    description: '地府管理制度和操作规程文件',
    icon: 'BookOutlined',
    totalFiles: 8934,
    digitalFiles: 8756,
    borrowedFiles: 12
  },
  {
    id: 9,
    name: '功德记录',
    description: '修行者功德累积和善行记录',
    icon: 'StarOutlined',
    totalFiles: 287453,
    digitalFiles: 251234,
    borrowedFiles: 345
  },
  {
    id: 10,
    name: '灵魂档案',
    description: '灵魂状态评估和修复记录',
    icon: 'HeartOutlined',
    totalFiles: 156789,
    digitalFiles: 142345,
    borrowedFiles: 223
  },
  {
    id: 11,
    name: '地狱管理',
    description: '十八层地狱运营管理档案',
    icon: 'FireOutlined',
    totalFiles: 89456,
    digitalFiles: 78234,
    borrowedFiles: 134
  },
  {
    id: 12,
    name: '救赎计划',
    description: '灵魂救赎和超度计划档案',
    icon: 'RiseOutlined',
    totalFiles: 56789,
    digitalFiles: 52345,
    borrowedFiles: 67
  }
])

// 最新档案动态 - 扩展为更多动态记录
const archiveDynamics = ref([
  {
    id: 1,
    title: '大批量纸质档案扫描完成',
    description: '第三殿提交的15万份审判档案扫描工作已完成，OCR识别率达到98.5%，共识别古文字符2.3亿个',
    type: '数字化',
    time: '2小时前',
    operator: '档案员李清照',
    icon: 'ScanOutlined',
    avatarColor: '#1890ff',
    tagColor: 'blue'
  },
  {
    id: 2,
    title: '电子档案备份系统升级',
    description: '档案备份系统完成v3.0升级，新增异地灾备功能，备份效率提升300%，现支持PB级数据备份',
    type: '系统升级',
    time: '4小时前',
    operator: '技术主管王守仁',
    icon: 'CloudServerOutlined',
    avatarColor: '#52c41a',
    tagColor: 'green'
  },
  {
    id: 3,
    title: '重要档案紧急借阅',
    description: '阎罗王殿紧急申请借阅"上古修行典籍"共计45卷，已通过特急审批程序，预计借阅期限30天',
    type: '紧急借阅',
    time: '6小时前',
    operator: '档案主管苏东坡',
    icon: 'BookOutlined',
    avatarColor: '#fa8c16',
    tagColor: 'orange'
  },
  {
    id: 4,
    title: '档案分类体系优化',
    description: '根据新版《地府档案管理规范》，完成档案分类体系重构，新增12个主分类，156个子分类',
    type: '分类整理',
    time: '1天前',
    operator: '分类专员白居易',
    icon: 'AppstoreOutlined',
    avatarColor: '#722ed1',
    tagColor: 'purple'
  },
  {
    id: 5,
    title: '档案安全加密升级',
    description: '核心档案启用量子加密算法，安全等级提升至SSS级，共加密档案23万份',
    type: '安全升级',
    time: '2天前',
    operator: '安全主管杜甫',
    icon: 'SafetyOutlined',
    avatarColor: '#eb2f96',
    tagColor: 'magenta'
  },
  {
    id: 6,
    title: '月度档案统计报告发布',
    description: '11月档案管理统计报告发布，数字化率再创新高，达到87.2%，新增数字化档案34万份',
    type: '统计报告',
    time: '3天前',
    operator: '统计员陆游',
    icon: 'FileTextOutlined',
    avatarColor: '#13c2c2',
    tagColor: 'cyan'
  },
  {
    id: 7,
    title: '自动化OCR识别系统上线',
    description: '新一代AI-OCR识别系统正式上线，古文识别率提升至99.2%，处理速度提升500%',
    type: '系统上线',
    time: '4天前',
    operator: '技术开发部门',
    icon: 'RobotOutlined',
    avatarColor: '#fa541c',
    tagColor: 'red'
  },
  {
    id: 8,
    title: '档案借阅逾期处理',
    description: '完成本月逾期档案催还工作，成功追回逾期档案127份，逾期率降至0.8%',
    type: '逾期处理',
    time: '5天前',
    operator: '借阅管理员辛弃疾',
    icon: 'ClockCircleOutlined',
    avatarColor: '#f5222d',
    tagColor: 'red'
  },
  {
    id: 9,
    title: '档案标签体系完善',
    description: '完成档案标签体系2.0版本升级，新增智能标签1200个，标签覆盖率达到95%',
    type: '标签管理',
    time: '6天前',
    operator: '标签专员李商隐',
    icon: 'TagsOutlined',
    avatarColor: '#52c41a',
    tagColor: 'green'
  },
  {
    id: 10,
    title: '跨部门档案共享协议签署',
    description: '与天庭、龙宫、西方极乐世界签署档案共享协议，实现跨界档案互通',
    type: '跨部门合作',
    time: '1周前',
    operator: '对外联络处',
    icon: 'GlobalOutlined',
    avatarColor: '#1890ff',
    tagColor: 'blue'
  },
  {
    id: 11,
    title: '档案损坏修复工作完成',
    description: '历时3个月的古旧档案修复工作完成，成功修复受损档案8956份',
    type: '档案修复',
    time: '1周前',
    operator: '修复专家团队',
    icon: 'ToolOutlined',
    avatarColor: '#eb2f96',
    tagColor: 'magenta'
  },
  {
    id: 12,
    title: '档案权限管理系统更新',
    description: '档案权限管理系统完成v2.5更新，新增细粒度权限控制，支持临时授权',
    type: '权限管理',
    time: '1周前',
    operator: '权限管理员岳飞',
    icon: 'LockOutlined',
    avatarColor: '#faad14',
    tagColor: 'gold'
  }
])

// 新增：档案操作统计数据
const operationStats = reactive({
  todayOperations: 15678,
  weeklyOperations: 98765,
  monthlyOperations: 445678,
  totalOperations: 12345678,
  popularOperations: [
    { name: '档案查询', count: 5678, percentage: 35.6 },
    { name: '档案借阅', count: 3456, percentage: 21.8 },
    { name: '档案上传', count: 2345, percentage: 14.7 },
    { name: '档案编辑', count: 1890, percentage: 11.9 },
    { name: '档案审核', count: 1234, percentage: 7.8 },
    { name: '档案删除', count: 567, percentage: 3.6 },
    { name: '权限设置', count: 456, percentage: 2.9 },
    { name: '系统维护', count: 234, percentage: 1.5 }
  ]
})

// 新增：档案质量统计
const qualityStats = reactive({
  totalQualityChecks: 234567,
  passedChecks: 225689,
  failedChecks: 8878,
  qualityScore: 96.2,
  commonIssues: [
    { issue: '图片模糊', count: 2345, percentage: 26.4 },
    { issue: '文字缺失', count: 1890, percentage: 21.3 },
    { issue: '格式错误', count: 1567, percentage: 17.6 },
    { issue: '分类错误', count: 1234, percentage: 13.9 },
    { issue: '重复档案', count: 987, percentage: 11.1 },
    { issue: '权限问题', count: 456, percentage: 5.1 },
    { issue: '元数据缺失', count: 399, percentage: 4.5 }
  ]
})

// 新增：系统性能统计
const systemPerformance = reactive({
  cpuUsage: 45.6,
  memoryUsage: 67.8,
  diskUsage: 78.9,
  networkSpeed: 1024.5,
  responseTime: 123.4,
  uptime: 99.95,
  dailyUsers: 2456,
  concurrentUsers: 234,
  peakUsers: 567
})

// 方法
const navigateToModule = (path) => {
  router.push(path)
}

const quickScan = () => {
  router.push('/files/digital-archive/scan-management')
}

const quickSearch = () => {
  // 实现快速搜索功能
}

const quickBorrow = () => {
  router.push('/files/borrow-system/borrow-process')
}

const systemMaintenance = () => {
  // 实现系统维护功能
}

// 新增：资源使用率颜色判断
const getResourceColor = (usage) => {
  if (usage < 50) return '#52c41a'
  if (usage < 80) return '#faad14'
  return '#f5222d'
}

// 新增：质量评分颜色
const getQualityColor = (score) => {
  if (score >= 90) return '#52c41a'
  if (score >= 70) return '#faad14'
  return '#f5222d'
}

// 新增：存储类型颜色
const getStorageTypeColor = (type) => {
  const colors = {
    纸质档案: '#1890ff',
    数字化档案: '#52c41a',
    电子档案: '#faad14',
    备份档案: '#722ed1'
  }
  return colors[type] || '#999'
}
</script>

<style lang="scss" scoped>
.files-container {
  padding: 24px;

  // 页面头部
  .files-header {
    text-align: center;
    margin-bottom: 32px;

    .header-content {
      .ancient-title {
        font-size: 32px;
        font-weight: bold;
        color: $secondary-color;
        margin-bottom: 8px;
        text-shadow: 0 0 20px rgba(212, 153, 10, 0.3);
      }

      .header-subtitle {
        font-size: 16px;
        color: $text-secondary;
        letter-spacing: 2px;
      }
    }

    .header-decoration {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 24px;
      gap: 16px;

      .decoration-line {
        width: 80px;
        height: 1px;
        background: linear-gradient(90deg, transparent, $secondary-color, transparent);
      }

      .decoration-symbol {
        font-size: 20px;
        color: $secondary-color;
        font-weight: bold;
      }
    }
  }

  // 路由信息
  .route-info {
    margin-bottom: 24px;
    padding: 12px 16px;
    border-radius: 8px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(212, 153, 10, 0.2);
  }

  // 统计卡片区域
  .stats-section {
    margin-bottom: 32px;

    .stat-card {
      border-radius: 12px;
      padding: 24px;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
      border: 1px solid rgba(212, 153, 10, 0.2);
      transition: all 0.3s ease;
      display: flex;
      align-items: center;
      gap: 16px;

      .stat-icon {
        width: 56px;
        height: 56px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24px;
        color: white;
      }

      .stat-content {
        flex: 1;

        .stat-title {
          font-size: 14px;
          color: $text-secondary;
          margin-bottom: 4px;
        }

        .stat-value {
          font-size: 28px;
          font-weight: bold;
          color: $primary-color;
          margin-bottom: 4px;
        }

        .stat-label {
          font-size: 12px;
          color: $text-secondary;
        }
      }

      &.primary-stat .stat-icon {
        background: linear-gradient(135deg, #1890ff, #40a9ff);
      }

      &.judgment-stat .stat-icon {
        background: linear-gradient(135deg, #52c41a, #73d13d);
      }

      &.pending-stat .stat-icon {
        background: linear-gradient(135deg, #fa8c16, #ffa940);
      }

      &.online-stat .stat-icon {
        background: linear-gradient(135deg, #722ed1, #9254de);
      }
    }
  }

  // 模块导航区域
  .modules-section {
    margin-bottom: 32px;

    .section-title {
      font-size: 20px;
      font-weight: bold;
      color: $primary-color;
      margin-bottom: 24px;
      display: flex;
      align-items: center;
      gap: 8px;

      .section-icon {
        color: $secondary-color;
      }
    }

    .module-card {
      border-radius: 16px;
      padding: 24px;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
      border: 1px solid rgba(212, 153, 10, 0.2);
      transition: all 0.3s ease;
      cursor: pointer;
      height: 100%;

      .module-header {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 16px;

        .module-icon {
          width: 48px;
          height: 48px;
          border-radius: 50%;
          background: linear-gradient(135deg, $secondary-color, #f0c674);
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 20px;
          color: white;
        }

        .module-title {
          font-size: 18px;
          font-weight: bold;
          color: $primary-color;
        }
      }

      .module-description {
        color: $text-secondary;
        line-height: 1.6;
        margin-bottom: 20px;
      }

      .module-stats {
        padding-top: 16px;
        border-top: 1px solid rgba(212, 153, 10, 0.2);

        .stat-item {
          display: flex;
          justify-content: space-between;
          margin-bottom: 8px;

          .stat-label {
            color: $text-secondary;
            font-size: 14px;
          }

          .stat-value {
            color: $secondary-color;
            font-weight: bold;
            font-size: 14px;
          }
        }
      }
    }
  }

  // 分类概览区域
  .categories-overview-section {
    margin-bottom: 32px;

    .section-title {
      font-size: 20px;
      font-weight: bold;
      color: $primary-color;
      margin-bottom: 24px;
      display: flex;
      align-items: center;
      gap: 8px;

      .section-icon {
        color: $secondary-color;
      }
    }

    .categories-grid {
      .category-card {
        border-radius: 12px;
        padding: 16px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
        border: 1px solid rgba(212, 153, 10, 0.2);
        transition: all 0.3s ease;
        height: 100%;

        .category-header {
          display: flex;
          align-items: flex-start;
          gap: 12px;
          margin-bottom: 16px;

          .category-icon {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: linear-gradient(135deg, $secondary-color, #f0c674);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
            color: white;
            flex-shrink: 0;
          }

          .category-info {
            flex: 1;

            .category-name {
              margin: 0 0 4px 0;
              color: $primary-color;
              font-size: 16px;
              font-weight: bold;
            }

            .category-description {
              margin: 0;
              color: $text-secondary;
              font-size: 12px;
              line-height: 1.4;
            }
          }
        }

        .category-stats {
          margin-bottom: 16px;

          .stat-mini {
            text-align: center;

            .stat-number {
              font-size: 16px;
              font-weight: bold;
              color: $secondary-color;
              margin-bottom: 2px;
            }

            .stat-label {
              font-size: 11px;
              color: $text-secondary;
            }
          }
        }

        .category-progress {
          .progress-info {
            display: flex;
            justify-content: space-between;
            margin-bottom: 8px;
            font-size: 12px;

            .progress-label {
              color: $text-secondary;
            }

            .progress-percentage {
              color: $secondary-color;
              font-weight: bold;
            }
          }
        }
      }
    }
  }

  // 档案动态区域
  .archive-dynamics-section {
    margin-bottom: 32px;

    .section-title {
      font-size: 20px;
      font-weight: bold;
      color: $primary-color;
      margin-bottom: 24px;
      display: flex;
      align-items: center;
      gap: 8px;

      .section-icon {
        color: $secondary-color;
      }
    }

    .dynamics-list {
      border-radius: 12px;
      padding: 24px;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
      border: 1px solid rgba(212, 153, 10, 0.2);

      .dynamics-title {
        font-weight: bold;
        color: $primary-color;
        font-size: 16px;
      }

      .dynamics-description {
        color: $text-primary;
        line-height: 1.5;
        margin-bottom: 8px;
      }

      .dynamics-meta {
        display: flex;
        gap: 16px;

        .dynamics-time {
          color: $text-secondary;
          font-size: 14px;
        }

        .dynamics-operator {
          color: $text-secondary;
          font-size: 14px;
        }
      }
    }
  }

  // 快速操作区域
  .quick-actions-section {
    :deep(.ant-card) {
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
      border: 1px solid rgba(212, 153, 10, 0.2);
      border-radius: 12px;
    }

    :deep(.ant-card-head) {
      border-bottom: 1px solid rgba(212, 153, 10, 0.2);
    }

    .ant-btn {
      height: 48px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      font-size: 16px;
    }
  }

  // 档案操作统计
  .operation-stats-section {
    margin-bottom: 32px;
    margin-top: 32px;
    .section-title {
      font-size: 20px;
      font-weight: bold;
      color: $primary-color;
      margin-bottom: 24px;
      display: flex;
      align-items: center;
      gap: 8px;

      .section-icon {
        color: $secondary-color;
      }
    }

    .operation-stat-card {
      border-radius: 12px;
      padding: 20px;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
      border: 1px solid rgba(212, 153, 10, 0.2);
      transition: all 0.3s ease;
      text-align: center;

      .stat-header {
        .stat-title {
          font-size: 14px;
          color: $text-secondary;
          margin-bottom: 8px;
        }

        .stat-value {
          font-size: 28px;
          font-weight: bold;
          color: $primary-color;
        }
      }
    }

    .popular-operations {
      margin-top: 32px;
      .operations-chart {
        .operation-item {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 12px;

          .operation-info {
            flex: 1;
            text-align: left;

            .operation-name {
              font-size: 14px;
              color: $primary-color;
              font-weight: bold;
            }

            .operation-count {
              font-size: 12px;
              color: $text-secondary;
            }
          }

          .operation-progress {
            flex-shrink: 0;
            width: 100px;

            .percentage {
              font-size: 12px;
              color: $secondary-color;
              font-weight: bold;
            }
          }
        }
      }
    }
  }

  // 档案质量统计
  .quality-stats-section {
    margin-bottom: 32px;

    .section-title {
      font-size: 20px;
      font-weight: bold;
      color: $primary-color;
      margin-bottom: 24px;
      display: flex;
      align-items: center;
      gap: 8px;

      .section-icon {
        color: $secondary-color;
      }
    }

    .quality-overview {
      .quality-metric {
        display: flex;
        justify-content: space-between;
        margin-bottom: 12px;

        .metric-label {
          font-size: 14px;
          color: $text-secondary;
        }

        .metric-value {
          font-size: 16px;
          font-weight: bold;
          color: $secondary-color;
        }

        .metric-success {
          color: #52c41a;
        }

        .metric-error {
          color: #f5222d;
        }

        .metric-primary {
          color: $primary-color;
        }
      }
    }

    .issues-chart {
      .issue-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 12px;

        .issue-info {
          flex: 1;
          text-align: left;

          .issue-name {
            font-size: 14px;
            color: $primary-color;
            font-weight: bold;
          }

          .issue-count {
            font-size: 12px;
            color: $text-secondary;
          }
        }

        .issue-progress {
          flex-shrink: 0;
          width: 100px;

          .percentage {
            font-size: 12px;
            color: $secondary-color;
            font-weight: bold;
          }
        }
      }
    }
  }

  // 系统性能监控
  .system-performance-section {
    margin-bottom: 32px;

    .section-title {
      font-size: 20px;
      font-weight: bold;
      color: $primary-color;
      margin-bottom: 24px;
      display: flex;
      align-items: center;
      gap: 8px;

      .section-icon {
        color: $secondary-color;
      }
    }

    .resource-usage {
      .resource-item {
        margin-bottom: 12px;

        .resource-label {
          font-size: 14px;
          color: $text-secondary;
          margin-bottom: 4px;
        }

        .resource-progress {
          .ant-progress {
            .ant-progress-bg {
              background-color: $secondary-color;
            }
          }
        }
      }
    }

    .network-metrics {
      .metric-item {
        display: flex;
        justify-content: space-between;
        margin-bottom: 12px;

        .metric-label {
          font-size: 14px;
          color: $text-secondary;
        }

        .metric-value {
          font-size: 16px;
          font-weight: bold;
          color: $secondary-color;
        }
      }
    }

    .user-activity {
      .activity-item {
        display: flex;
        justify-content: space-between;
        margin-bottom: 12px;

        .activity-label {
          font-size: 14px;
          color: $text-secondary;
        }

        .activity-value {
          font-size: 16px;
          font-weight: bold;
          color: $secondary-color;
        }
      }
    }
  }

  // 档案存储分析
  .storage-analysis-section {
    margin-bottom: 32px;

    .section-title {
      font-size: 20px;
      font-weight: bold;
      color: $primary-color;
      margin-bottom: 24px;
      display: flex;
      align-items: center;
      gap: 8px;

      .section-icon {
        color: $secondary-color;
      }
    }

    .storage-distribution {
      .storage-type {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 12px;

        .type-info {
          display: flex;
          align-items: baseline;
          gap: 8px;

          .type-name {
            font-size: 14px;
            color: $primary-color;
            font-weight: bold;
          }

          .type-size {
            font-size: 14px;
            color: $secondary-color;
            font-weight: bold;
          }
        }

        .ant-progress {
          flex: 1;
          margin-left: 10px;

          .ant-progress-bg {
            background-color: $secondary-color;
          }
        }
      }
    }

    .growth-trend {
      .trend-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 12px;

        .trend-period {
          font-size: 14px;
          color: $text-secondary;
        }

        .trend-value {
          font-size: 16px;
          font-weight: bold;
          color: $secondary-color;
        }

        .trend-change {
          font-size: 12px;
          font-weight: bold;

          &.positive {
            // color: $success-color;
          }

          &.neutral {
            color: $text-secondary;
          }
        }
      }
    }
  }
}
</style>
